﻿<style>
    .pro_table{
        table-layout: fixed;

        border: solid #ccc 1px;  
        -moz-border-radius: 6px;  
        -webkit-border-radius: 6px;  
        border-radius: 6px;  
        -webkit-box-shadow: 0 1px 1px #ccc;  
        -moz-box-shadow: 0 1px 1px #ccc;  
        box-shadow: 0 1px 1px #ccc;
    }
    .pro_table td, .pro_table th {  
        border-left: 1px solid #ccc;  
        border-top: 1px solid #ccc;  
        padding: 6px;  
        text-align: left;  
    }
    .award-name{
        width:133px;
        word-break:keep-all;/* 不换行 */
        white-space:nowrap;/* 不换行 */
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        -o-text-overflow:ellipsis;
    }
</style>
<!-- MAIN CONTENT -->
<div id="content">
    
    <div smart-include="app/yksensor/views/sub-header.tpl.html"></div>
    <div class="row margin-bottom-10" ng-show="add">
        <div class="col-xs-12">
            <button class="btn btn-labeled btn-primary" ng-click="createProject()">
                <span class="btn-label">
                    <i class="glyphicon glyphicon-plus"></i>
                </span>
                新建油罐
            </button>
        </div>
    </div>
    <div id="storeBox" class="clearfix margin-bottom-50">
        <!-- <h1>库区总览</h1> -->
        <div class="well padding-10 tank-well pull-left text-center" ng-repeat="pro in projects" ng-click="viewDetail(pro.id, pro.name, pro.code)">
            <!-- <img src="styles/img/tank/gong.jpg" alt="" ng-src="styles/img/tank/{{pro.type == 3 ? 'gong' : (pro.type == 4 ? 'wo' : 'nopic')}}.jpg"> -->
            <img src="styles/img/tank/wo.jpg">
            <a class="tank-name">
                {{pro.name}}<br>
                【{{pro.code}}】
                <!-- <button class="btn btn-primary btn-xs" title="编辑油罐信息" ng-click="editProject(pro.id,pro.name,$event)"><span class="glyphicon glyphicon-edit"></span></button> -->
            </a>
            <div class="progress_box">
                <div class="progress vertical bottom">
                    <div class="progress-bar bg-color-redLight" data-transitiongoal="{{pro.level}}" aria-valuenow="{{pro.pos_present}}" style="background-color:#bb0000!important; height: {{pro.pos_present}}%; opacity:0.5">{{pro.pos_present | number:0}}%</div>
                </div>
            </div>
            <table class="pro_table">
                <tbody>
                    <tr>
                        <td width="150"><b>货品名称</b></td>
                        <td><div class="award-name" title="{{pro.item_name}}">{{pro.item_name}} <!--【{{pro.item_code}}】--></div></td>
                    </tr>
                    <tr>
                        <td><b>货主名称</b></td>
                        <td><div class="award-name" title="{{pro.company_name}}">{{pro.company_name}} <!--【{{pro.company_id}}】--></div></td>
                    </tr>
                    <tr>
                        <td><b>库存数量</b></td>
                        <td>{{pro.qty | number:2}} {{pro.unit}}</td>
                    </tr>
                    <tr>
                        <td><b>液位库存</b></td>
                        <td>{{pro.y_qty | number:2}} m3</td>
                    </tr>
                    <tr>
                        <td><b>流量库存</b></td>
                        <td>{{pro.l_qty | number:2}} m3/s</td>
                    </tr>
                    <!-- <tr>
                        <td><b>当前液位</b></td>
                        <td>{{pro.real_pos | number:2}} m</td>
                    </tr>
                    <tr>
                        <td><b>平均温度</b></td>
                        <td>{{pro.avg_temp | number:2}} °C</td>
                    </tr> -->
                </tbody>
            </table>
        </div>

    </div>

</div>
<!-- END MAIN CONTENT -->
